html {
  --el-menu-item-hover: #E7FAF9;
  --dark-bg-login-color: #242424;
}


html.dark {
  --el-menu-item-hover: unset;
  --el-bg-color: #242424;

  .login-card {
    background: #161618 !important;

    .el-input__wrapper {
      box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset !important;
      background: var(--el-input-bg-color, var(--el-fill-color-blank)) !important;
    }
  }

  .v-md-textarea-editor textarea {
    color: var(--el-text-color-primary);
  }

  .v-md-editor__toc-nav-item {
    color: var(--el-text-color-primary);
  }

  .v-md-editor__left-area-title {
    color: var(--el-text-color-primary);
  }

  .github-markdown-body table td,.github-markdown-body table tr {
    color: #3e3e3e;
  }

  .markdown-text {
    background: var(--el-bg-color);
  }

  .v-md-editor {
    background: var(--el-bg-color);
  }

  .login-bg {
    background: var(--dark-bg-login-color) !important;
  }

  .catalogue-button-hover {
    background-color: var(--el-bg-color) !important;
  }

  .catalogue-button {
    background-color: var(--el-color-info-light-8);
  }

  .catalogue-button:hover {
    color: #00A298 !important;
  }

  .cancel-button {
    background: var(--el-fill-color-blank) !important;
    color: var(--el-color-white) !important;
    border: var(--el-border) !important;
  }

  .cancel-button:hover {
    background: var(--el-color-info-light-8) !important;
    color: var(--el-text-color-primary) !important;
    border-color: var(--el-color-info-light-8) !important;
  }

  .cancel-button:active {
    border-color: var(--el-color-info-light-3) !important;
  }

  .dialog-footer {
    .el-button:not(.el-button--primary) {
      background: var(--el-fill-color-blank) !important;
      color: var(--el-color-white) !important;
      border: var(--el-border) !important;
    }

    .el-button:not(.el-button--primary):hover {
      background: var(--el-color-info-light-8) !important;
      color: var(--el-text-color-primary) !important;
      border-color: var(--el-color-info-light-8) !important;
    }

    .el-button:not(.el-button--primary):active {
      border-color: var(--el-color-info-light-3) !important;

    }
  }

}

html.dark .el-collapse-item__header:hover {
  background: var(--el-tree-node-hover-bg-color);
}

html.dark .file {
  background-color: transparent !important;
}

html.dark .el-dropdown-menu__item:not(.is-disabled):focus {
  background-color: unset !important;
}

html.dark .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: unset !important;

  .no-underline {
    color: #1A9B92;
  }
}
